<!DOCTYPE html>
<html>


<head>
    <!--引入公用模板-->
    <%- include ../taglib/layout-report.ejs %>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">

            <div class="alert alert-info alert-dismissable report-total-div-height">

                <div class="row">
                    <div class="col-sm-12">
                       <span class="views-number" id="span_deptName">
                                黑龙江宏赫（集团）投资有限公司
                        </span>
                    </div>
                    <div class="col-sm-6 pull-right">
                        <span class=" pull-right" id="span_totalMile">0公里</span>
                    </div>
                    <div class="col-sm-12">
                        <h3 class="font-bold"  id="span_avgMile">平均0公里，总数516辆</h3>
                    </div>
                    <!--<div class="col-sm-6">-->
                        <!--&lt;!&ndash;<h3 class="font-bold">更多</h3>&ndash;&gt;-->
                    <!--</div>-->
                    <!--<div class="col-sm-6 pull-right">-->
                        <!--<div class="pull-right" style="padding-right: 1px">-->
                            <!--<button type="button" class="btn btn btn-primary" onclick=""><i-->
                                        <!--class="fa fa-arrow-right"></i>-->
                            <!--</button>-->
                        <!--</div>-->
                    <!--</div>-->

                </div>

            </div>

        </div>
        <div class="col-sm-3">
            <div class="alert alert-success alert-dismissable report-total-div-height">
                <div class="row">
                    <div class="col-sm-12">
                       <span class="views-number">
                                            行驶时长
                        </span>
                    </div>
                    <div class="col-sm-6 pull-right">
                        <span class=" pull-right" id="span_totalRunTime">0秒</span>
                    </div>
                    <div class="col-sm-12">
                        <h3 class="font-bold" id="span_avgRunTime">平均0秒</h3>
                    </div>
                    <!--<div class="col-sm-6">-->
                        <!--&lt;!&ndash;<h3 class="font-bold">详情</h3>&ndash;&gt;-->
                    <!--</div>-->
                    <!--<div class="col-sm-6 pull-right">-->
                        <!--<div class="pull-right" style="padding-right: 1px">-->
                            <!--<button type="button" class="btn btn btn-primary" onclick=""><i-->
                                        <!--class="fa fa-arrow-right"></i>-->
                            <!--</button>-->
                        <!--</div>-->
                    <!--</div>-->

                </div>
            </div>

        </div>
        <div class="col-sm-3">

            <div class="alert alert-danger alert-dismissable report-total-div-height">
                <div class="row">
                    <div class="col-sm-12">
                       <span class="views-number">
                                            停驶时长
                        </span>
                    </div>
                    <div class="col-sm-6 pull-right">
                        <span class=" pull-right" id="span_totalStopTime">0秒</span>
                    </div>
                    <div class="col-sm-12">
                        <h3 class="font-bold" id="span_avgStopTime">平均0秒</h3>
                    </div>
                    <!--<div class="col-sm-6">-->
                        <!--&lt;!&ndash;<h3 class="font-bold">详情</h3>&ndash;&gt;-->
                    <!--</div>-->
                    <!--<div class="col-sm-6 pull-right">-->
                        <!--<div class="pull-right" style="padding-right: 1px">-->
                            <!--<button type="button" class="btn btn btn-primary" onclick=""><i-->
                                        <!--class="fa fa-arrow-right"></i>-->
                            <!--</button>-->
                        <!--</div>-->
                    <!--</div>-->

                </div>


            </div>
        </div>
        <div class="col-sm-3">

            <div class="alert alert-warning alert-dismissable report-total-div-height">
                <div class="row">
                    <div class="col-sm-12">
                       <span class="views-number">
                                            超速次数
                        </span>
                    </div>
                    <div class="col-sm-6 pull-right">
                        <span class=" pull-right" id="span_totalWarningTime">0次</span>
                    </div>
                    <div class="col-sm-12">
                        <h3 class="font-bold" id="span_avgWarningTime">平均0.0次</h3>
                    </div>
                    <!--<div class="col-sm-6">-->
                        <!--&lt;!&ndash;<h3 class="font-bold">详情</h3>&ndash;&gt;-->
                    <!--</div>-->
                    <!--<div class="col-sm-6 pull-right">-->
                        <!--<div class="pull-right" style="padding-right: 1px">-->
                        <!--<button type="button" class="btn btn btn-primary" onclick=""><i-->
                                    <!--class="fa fa-arrow-right"></i>-->
                        <!--</button>-->
                        <!--</div>-->
                    <!--</div>-->

                </div>
            </div>

        </div>


    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>周期对比</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="flot-chart" style="min-width:400px;height:400px">
                        <div class="flot-chart-content" id="container"></div>
                    </div>
                    <!--<div class="flot-chart" style="min-width:400px;height:400px;padding-top: 10px">-->
                        <!--<div class="flot-chart-content" id="containerPie"></div>-->
                    <!--</div>-->
                    <div class="contact-box">
                            <div>
                                <p><span class="milesspan" style="cursor:pointer" id="chooseMiss">里程数:</span>
                                    <span id="span_preMile">0.0公里|5.7公里,比上月少</span><font size="3" class="milesspan" id="font_preMile">5.7</font>公里</p>
                                <p><span class="onlineDrivingArea" style="cursor:pointer" id="chooseMiss">行驶时长:</span>
                                    <span id="span_preRunTime">0秒|4分0秒,比上月少</span><font size="3" class="olinespan" id="font_preRunTime">4分0秒</font></p>
                                <p><span class="parkingspan" style="cursor:pointer" id="chooseMiss">停驶时长:</span>
                                    <span id="span_preStopTime">0秒|1小时22分40秒,比上月少</span><font  size="3" class="parkingspan" id="font_preStopTime">1小时22分40秒</font></p>
                                <p><span class="speedspan" style="cursor:pointer" id="chooseMiss">超速次数:</span>
                                    <span id="span_preWarningNum"> 0次|1次,比上月少</span><font  size="3" class="speedspan" id="font_preWarningNum">1次</font></p>
                            </div>
                            <div class="clearfix"></div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!--<div class="col-sm-6">-->
            <!--<div class="ibox float-e-margins">-->
                <!--<div class="ibox-title">-->
                    <!--<h5>里程对比</h5>-->
                    <!--<div class="ibox-tools">-->
                        <!--<a class="collapse-link">-->
                            <!--<i class="fa fa-chevron-up"></i>-->
                        <!--</a>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="ibox-content">-->
                    <!--<div class="flot-chart" style="min-width:400px;height:400px">-->
                        <!--<div class="flot-chart-content" id="containerColumn"></div>-->
                    <!--</div>-->
                    <!--<div class="flot-chart" style="min-width:400px;height:400px;padding-top: 10px">-->
                        <!--<div class="flot-chart-content" id="containerBase"></div>-->
                    <!--</div>-->
                    <!--<div class="contact-box">-->
                        <!--<div class="row">-->
                            <!--<div class="col-sm-6">-->
                                <!--<p><span class="onlineDrivingArea" style="cursor:pointer" id="chooseMiss">行驶时长:</span>-->
                                    <!--<span>0秒</span></p>-->

                                <!--<p><span class="milesspan" style="cursor:pointer" id="chooseMiss">行驶程数:</span>-->
                                    <!--<span>0公里</span></p>-->
                            <!--</div>-->
                            <!--<div class="col-sm-6">-->
                                <!--<p><span class="parkingspan" style="cursor:pointer" id="chooseMiss">停驶时长:</span>-->
                                    <!--<span>0秒</span></p>-->
                                <!--<p><span class="onlineDrivingArea" style="cursor:pointer" id="chooseMiss">行驶次数:</span>-->
                                    <!--<span>0次</span></p>-->
                            <!--</div>-->

                            <!--<div class="col-sm-12">-->
                                <!--<p><span class="speedspan" style="cursor:pointer" id="chooseMiss">超速次数:</span>-->
                                    <!--<span>0次</span></p>-->
                            <!--</div>-->
                            <!--<div class="col-sm-12">-->
                                <!--<p><span class="milesspan" style="cursor:pointer" id="chooseMiss">里程数:</span>-->
                                    <!--<span>超越了1%的车辆</span></p>-->
                            <!--</div>-->


                        <!--</div>-->
                        <!--<div class="clearfix"></div>-->
                        <!--</a>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->

    </div>
</div>
<!--<input type='button' text='dianji' onclick="play_sound()"/>-->
<input type="hidden" id="h_c_car_id">
<input type="hidden" id="h_all_car_id">
<%- include ../taglib/layout-content.ejs %>
<script>
    var chart;
    var categories=[
        "1","2","3","4","5","6","7","8","9","10",
        "11","12","13","14","15","16","17","18","19","20",
        "21","22","23","24","25","26","27","28","29","30","31"
    ];
    $(document).ready(function () {

        var data=[
            {
                name:"7月",
                data:[
                    1,2,2,2,2,22,2,2,3,30,
                    11,22,32,12,22,22,2,2,3,30,
                    31,32,42,12,42,22,2,2,3,30,33
                ]
            },{
                name:"6月",
                data:[
                    5,8,2,2,11,12,2,21,3,30,
                    1,12,22,12,32,22,12,2,3,30,
                    1,32,3,12,42,22,2,2,3,30,0
                ]
            }
        ];
        queryChart();
        queryTotalData();
//        drawChartLine(categories,data);
//        var cdata=[]
//        drawChartColumn(categories,cdata);
//
//        var pieData=[
//            ];
//        drawChartPieBase(categories,pieData);
//        drawChartPie(pieData);
    });

//    function queryTotalMonthData() {
//        $.ajax({
//            type: "GET",
//            url: "/report/queryTotalMonthData",
//            cache: false,
//            async: false,
//            dataType: "json",
//            success: function (data) {
//                debugger;
//                var pieDlineDataata=data.lineData
//                drawChartLine(categories,lineData);
//            }
//        });
//    }

    function queryTotalData() {
        $.ajax({
            type: "GET",
            url: "/report/queryTotalData",
            cache: false,
            async: false,
            dataType: "json",
            success: function (data) {
                debugger;
                var avgMile=data.avgMile;
                var deptName=data.deptName;
                var carNum=data.carNum;
                var totalMile=data.totalMile;
                var runTime=data.runTime;
                var avgRunTime=data.avgRunTime;
                var stopTime=data.stopTime;
                var avgStopTime=data.avgStopTime;
                var warningNum=data.warningNum;
                var avgWarningNum=data.avgWarningNum;

                var runTimePre=data.runTimePre;
                var stopTimePre=data.stopTimePre;
                var warningNumPre=data.warningNumPre;
                var totalMilePre=data.totalMilePre;
                if(deptName!="中国"){
                    $("#span_deptName").html("黑龙江宏赫（集团）投资有限公司-"+deptName);
                    $("#allcar").html("全部("+resData.totalNum+")");
                    $("#onlinecar").html("在线("+resData.onlineNum+")");
                    $("#offlinecar").html("离线("+resData.offlineNum+")");
                }
                $("#span_totalMile").html(totalMile+"公里");
                $("#span_avgMile").html("平均"+avgMile+"公里，总数"+carNum+"辆");
                $("#span_totalRunTime").html(runTime+"秒");
                $("#span_avgRunTime").html("平均"+avgRunTime+"秒");
                $("#span_totalStopTime").html(stopTime+"秒");
                $("#span_avgStopTime").html("平均"+avgStopTime+"秒");
                $("#span_totalWarningTime").html(warningNum+"次");
                $("#span_avgWarningTime").html("平均"+avgWarningNum+"次");


//                <span id="span_preMile">0.0公里|5.7公里,比上月少
//                <span id="span_preRunTime">0秒|4分0秒,比上月少
//                <span id="span_preStopTime">0秒|1小时22分40秒,比上月少
//                <span id="span_preWarningNum"> 0次|1次,比上月少
                if(totalMilePre>totalMile){
                    $("#span_preMile").html(totalMile+"公里|"+totalMilePre+"公里,比上月少");
                    var s=totalMilePre-totalMile;
                    $("#font_preMile").html(s);
                }else{
                    $("#span_preMile").html(totalMile+"公里|"+totalMilePre+"公里,比上月多");
                    var s=totalMile-totalMilePre;
                    $("#font_preMile").html(s);
                }
                if(runTimePre>runTime){
                    $("#span_preRunTime").html(runTime+"秒|"+runTimePre+"秒,比上月少");
                    var s=runTimePre-runTime;
                    $("#font_preRunTime").html(s);
                }else{
                    $("#span_preRunTime").html(runTime+"秒|"+runTimePre+"秒,比上月多");
                    var s=runTime-runTimePre;
                    $("#font_preRunTime").html(s);

                }
                if(stopTimePre>stopTime){
                    $("#span_preStopTime").html(stopTime+"秒|"+stopTimePre+"秒,比上月少");
                    var s=stopTimePre-stopTime;
                    $("#font_preStopTime").html(s);
                }else{
                    $("#span_preStopTime").html(stopTime+"秒|"+stopTimePre+"秒,比上月多");
                    var s=stopTime-stopTimePre;
                    $("#font_preStopTime").html(s);
                }
                if(warningNumPre>warningNum){
                    $("#span_preWarningNum").html(warningNum+"次|"+warningNumPre+"次,比上月少");
                    var s=warningNumPre-warningNum;
                    $("#font_preWarningNum").html(s);
                }else{
                    $("#span_preWarningNum").html(warningNum+"次|"+warningNumPre+"次,比上月多");
                    var s=warningNum-warningNumPre;
                    $("#font_preWarningNum").html(s);
                }
            }
        });
    }

    function queryChart() {
        $.ajax({
            type: "GET",
            url: "/report/totalChart",
            cache: false,
            async: false,
            dataType: "json",
            success: function (data) {
                debugger;
                var lineData=data.data
                drawChartLine(categories,lineData);
            }
        });
    }
    /**
     * Highcharts 在 4.2.0 开始已经不依赖 jQuery 了，直接用其构造函数既可创建图表
     **/
    
    function drawChartLine(categories,data){
        chart = new Highcharts.Chart('container', {
            title: {
                text: '',
                x: -20
            },
            subtitle: {
//                text: '数据来源: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: categories,
                title: {
                    text: '天'
                },
            },
            yAxis: {
                title: {
                    text: '行驶里程(KM)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y} KM</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: data
        });
    }
    function drawChartColumn(categories,data) {
        $('#containerColumn').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: ''
            },
            subtitle: {
//                text: '数据来源: WorldClimate.com'C
            },
            xAxis: {
                categories: categories,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: '非法行驶 (次数)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} 次数</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: data
        });
    }
    function drawChartPieBase(categories,pieData) {
        $('#containerBase').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: ''
            },
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: '',
                data:pieData
            }]
        });
    }
    function drawChartPie(pieData) {
        $('#containerPie').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                spacing : [100, 0 , 40, 0]
            },
            title: {
                floating:true,
                text: ''
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    },
                    point: {
                        events: {
                            mouseOver: function(e) {  // 鼠标滑过时动态更新标题
                                // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
                                chart.setTitle({
                                    text: e.target.name+ '\t'+ e.target.y + ' %'
                                });
                            }
                            //,
                            // click: function(e) { // 同样的可以在点击事件里处理
                            //     chart.setTitle({
                            //         text: e.point.name+ '\t'+ e.point.y + ' %'
                            //     });
                            // }
                        }
                    },
                }
            },
            series:[{
                type: 'pie',
                innerSize: '80%',
                name: '',
                data: pieData
            }]
        }, function(c) {
            // 环形图圆心
            var centerY = c.series[0].center[1],
                titleHeight = parseInt(c.title.styles.fontSize);
            c.setTitle({
                y:centerY + titleHeight/2
            });
            chart = c;
        });
    }

</script>
</body>
</html>
